<template>
  <div>
    <!-- 申报人数趋势图 -->
    <Echart
      :options="options"
      id="sbrsqst"
      height="200px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
import { formatterAxisNum } from "@/common/utils";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        console.log(newData);
        this.options = {
          title: {
            text: "",
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgb(41, 103, 186)",
            axisPointer: {
              type: "line",
              label: {
                show: true,
                backgroundColor: "#7B7DDC",
              },
              lineStyle: {
                color: "#7B7DDC",
              },
            },
          },
          legend: {
            data: ["昨日", "今日"],
            textStyle: {
              color: "#B4B4B4",
            },
            icon: "diamond",
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 20,
            top: "0%",
            itemStyle: {
              borderWidth: 2,
            },
          },
          grid: {
            x: "8%",
            width: "88%",
            y: "20%",
            left: 35,
          },
          xAxis: {
            data: [
              "0时",
              "1时",
              "2时",
              "3时",
              "4时",
              "5时",
              "6时",
              "12时",
              "18时",
              "24时",
            ],
            axisLine: {
              lineStyle: {
                color: "#2b4246",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
          },
          yAxis: {
            name: "人",
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              //决定是否显示坐标中网格
              show: true,
              type: "dashed",
              lineStyle: {
                color: "#2b4246",
              },
            },
            axisLabel: {
              // margin: 2,
              formatter: formatterAxisNum,
            },
          },
          series: [
            {
              name: "昨日",
              data: [1300, 2230, 1900, 4300, 3500, 3200, 985, 12134, 232, 4224],
              type: "line",
              fill: {
                show: true,
              },
              itemStyle: {
                color: "#45e6cb",
              },
              symbol: "diamond",
            },
            {
              name: "今日",
              data: [
                1200,
                1230,
                4500,
                7100,
                3400,
                4200,
                85,
                10230,
                3312,
                32232,
                323,
              ],
              type: "line",
              itemStyle: {
                color: "#f59e6e",
              },
              symbol: "diamond",
              smooth: true,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
